<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能体性能数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
            background-color: #f8f9fa; 
            color: #212529; 
            margin: 0; 
            padding: 20px; 
        }
        .container { 
            max-width: 1200px; 
            margin: auto; 
            background-color: #ffffff; 
            padding: 20px; 
            border-radius: 8px; 
            box-shadow: 0 0 10px rgba(0,0,0,0.05); 
        }
        h1, h2 { 
            text-align: center; 
            color: #343a40; 
        }
        .chart-container { 
            position: relative; 
            height: 40vh; 
            width: 100%; 
            margin-bottom: 40px; 
        }
        .summary { 
            text-align: center; 
            font-size: 1.2em; 
            margin-bottom: 20px; 
        }
        .grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 20px; 
        }
        .card { 
            background-color: #f8f9fa; 
            padding: 15px; 
            border-radius: 5px; 
        }
        .card h3 { 
            margin-top: 0; 
            text-align: center;
        }
        @media (max-width: 600px) {
            body { 
                padding: 10px; 
            }
            .container { 
                padding: 15px; 
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI智能体性能数据看板</h1>
        <p class="summary">实际处理的数据集总记录数: 80</p>

        <div class="grid">
            <div class="card">
                <h3>问题1: 多模态能力排名前三的智能体类型</h3>
                <div class="chart-container">
                    <canvas id="agentTypeChart"></canvas>
                </div>
            </div>
            <div class="card">
                <h3>问题2: 多模态能力排名前三的大模型架构</h3>
                <div class="chart-container">
                    <canvas id="modelArchChart"></canvas>
                </div>
            </div>
            <div class="card">
                <h3>问题3: 公正性排名前三的任务类型</h3>
                <div class="chart-container">
                    <canvas id="taskCategoryChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Data for Question 1
        const q1_labels = ['Research Assistant', 'Document Processor', 'Code Assistant'];
        const q1_data = [50.0, 40.0, 25.0];
        new Chart(document.getElementById('agentTypeChart'), {
            type: 'bar',
            data: {
                labels: q1_labels,
                datasets: [{ 
                    label: '支持多模态处理的占比 (%)',
                    data: q1_data,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: { 
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        ticks: { 
                            callback: function(value) { return value + '%' }
                        }
                    }
                }, 
                responsive: true, 
                maintainAspectRatio: false 
            }
        });

        // Data for Question 2
        const q2_labels = ['CodeT5+', 'GPT-4o', 'Gemini-Pro'];
        const q2_data = [42.9, 42.9, 25.0];
        new Chart(document.getElementById('modelArchChart'), {
            type: 'bar',
            data: {
                labels: q2_labels,
                datasets: [{ 
                    label: '支持多模态处理的占比 (%)',
                    data: q2_data,
                    backgroundColor: 'rgba(255, 159, 64, 0.6)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    borderWidth: 1
                }]
            },
            options: { 
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        ticks: { 
                            callback: function(value) { return value + '%' }
                        }
                    }
                }, 
                responsive: true, 
                maintainAspectRatio: false 
            }
        });

        // Data for Question 3
        const q3_labels = ['Communication', 'Creative Writing', 'Text Processing'];
        const q3_data = [0.821, 0.794, 0.793];
        new Chart(document.getElementById('taskCategoryChart'), {
            type: 'bar',
            data: {
                labels: q3_labels,
                datasets: [{ 
                    label: '偏见检测分数中位数',
                    data: q3_data,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: { 
                scales: { 
                    y: { 
                        beginAtZero: true 
                    }
                }, 
                responsive: true, 
                maintainAspectRatio: false 
            }
        });
    </script>
</body>
</html>